<template lang="pug">
div(class="large-dose-menu")
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column  h3")
            div(class="flex-column-item flex-center-center under-line")
              div(class="flex-row")
                div(class="flex-row-item flex-3 flex-center-center")
                  span  --大剂量菜单--
                div(class="flex-row-item right")
                  span {{menuIndex + 1}}/{{menus.length}}
            div(class="flex-column-item flex-center",v-for="(menu,index) in currentPageMenus",
            :class="{'selected-text':index == menuIndex % 3 }") {{index + 1 + skipCount}}.{{menu.name}}
            div(:class="'flex-'+ (3 - currentPageMenus.length)")
</template>

<script>
export default {
  data() {
    return {
      page: { maxResultCount: 3 },
      menuIndex: 0
    };
  },
  computed: {
    menus() {
      var menus = [
        { name: "三餐量预设", id: 0, to: "/large-dose/prev-setting" },
        { name: "常规大剂量", id: 1, to: "/large-dose/common" }
      ];

      if (window.dose.menus.fb)
        menus.push({ name: "方波大剂量", id: 2, to: "/react-ware/index" });

      if (window.dose.menus.sb)
        menus.push({
          name: "双波大剂量",
          id: 3,
          to: "/react-ware/double-ware"
        });

      if (window.dose.menus.xd) menus.push({ name: "大剂量向导", id: 4 });

      menus.push({ name: "大剂量记录", id: 5, to: "/large-dose/history" });
      return menus;
    },
    currentPageMenus() {
      const start = this.skipCount;
      const end = this.skipCount + this.page.maxResultCount;
      return this.menus.slice(start, end);
    },
    skipCount() {
      if (this.menus && this.menus.length < 4) {
        return 0; // 总是不翻页
      } else {
        return this.menuIndex > 2 ? 3 : 0;
      }
    }
  },
  methods: {
    up() {
      this.menuIndex =
        this.menuIndex == 0 ? this.menus.length - 1 : this.menuIndex - 1;
    },
    down() {
      this.menuIndex =
        this.menuIndex == this.menus.length - 1 ? 0 : this.menuIndex + 1;
    },

    back() {
      this.$router.push("/menu");
    },
    yes() {
      var active = this.menus.find((menu, index) => {
        return index == this.menuIndex;
      });
      this.$router.push(active.to);
    }
  },
  mounted() {
    /// 这个activeId作为在menus中的索引

    const id = parseInt(this.$route.query.index) || 0;
    const vm = this;

    this.menus.forEach((menu, index) => {
      if (menu.id == id) vm.menuIndex = index;
    });

  }
};
</script>

<style lang="less">
</style>
